viewof price = Inputs.range(
[0, 1000000000],
{value: 200000, step: 10000, label: "Price (min):"}
)
viewof make_model = Inputs.checkbox(
["Volkswagen Polo", "Toyota Hilux", "Ford Ranger"],
{ value: ["Toyota Hilux", "Volkswagen Polo"],
label: "Make & model:"
}
)
Plot.plot({
x: {
domain: [0, 300000]
},
marks: [
Plot.dot(filtered, { x: "kilometers", y: "price" }),
Plot.linearRegressionY(filtered, {x: "kilometers", y: "price", stroke: "steelblue", ci: 0.95})
]
})
chart = Histogram(filtered, {
value: d => d.price,
label: "Price",
width,
height: 500,
color: "steelblue"
})
Plot.plot({
y: {
grid: true,
inset: 6
},
marks: [
Plot.boxY(filtered, {x: "make_model", y: "price", fill: "make_model",
title: (d) =>
`${d.make_model} \n Price: ${d.price}`})
]
})
bp = BoxPlot(filtered, { x: d => d.year, y: d => d.price, color: d => d.make_model, xLabel: “Year →”, yLabel: “↑ price”, height: 500 })
Read and filter the data based on the user’s inputs:
data_t = transpose(data)
filtered = data_t.filter(function(ad) {
return price < ad.price &&
make_model.includes(ad.make_model);
})
d3 = require("d3@7")
import {Histogram} from "@d3/histogram"
import {BoxPlot} from "@d3/box-plot"
import {Plot} from "@mkfreeman/plot-tooltip"